<template>
  <div class="edit-user-dialog">
    <el-dialog :destroy-on-close="true" append-to-body :close-on-click-modal="false"
               :visible.sync="addUserVisible" width="25%" :before-close="handleClose">
      <el-form ref="user" :model="user" :rules="userRules" label-width="80px">
        <el-form-item label="用户角色" style="width: 300px" prop="UserType">
          <el-select v-model="user.UserType" placeholder="请选择用户角色">
            <el-option label="OPN操作员" value="1"></el-option>
            <el-option label="OPN技师" value="2"></el-option>
            <el-option label="ME" value="3"></el-option>
            <el-option label="PE" value="4"></el-option>
            <el-option label="管理员" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名称" style="width: 300px" prop="UserName">
          <el-input v-model="user.UserName"></el-input>
        </el-form-item>
        <el-form-item label="刷卡数据" style="width: 300px" prop="CardCode">
          <el-input type="password" @focus="onTarget(1)" @blur="onTarget(2)" v-model.number="user.CardCode"
                    placeholder="请刷卡..."></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确认</el-button>
          <el-button @click="handleCloseBtn">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
module.exports = {
  name: 'EditUserDialog',
  props: {
    show: { type: Boolean, default: false }
  },
  watch: {
    show (v) {
      if (v) {
        this.addUserVisible = v;
        window.addEventListener('keydown', this.handleKeyPress((keys) => {
          if (this.isInputPassword && !isNaN(keys)) {
            this.user.CardCode = keys;
          }
        }, 1000));
      }
    }
  },
  data () {
    return {
      isInputPassword: false,
      userRules: {
        UserName: [
          { required: true, message: '请输入用户名称', trigger: 'blur' }
        ],
        CardCode: [
          { required: true, message: '请刷卡', trigger: 'change' }
        ],
        UserType: [
          { required: true, message: '请选择角色', trigger: 'change' }
        ]
      },
      addUserVisible: false,
      refresh: false,
      CardCode: '',
      user: {
        UserName: null,
        CardCode: '',
        UserType: null
      },
      inputTime: null
    }
  },
  methods: {
    onTarget (val) {
      this.isInputPassword = val === 1;
    },
    handleKeyPress (callback, delay) {

      let timer;
      let keys = '';

      return function () {
        const context = this;
        const args = arguments;

        clearTimeout(timer);
        const key = args[0].key;
        keys += key;
        timer = setTimeout(() => {
          callback.apply(context, [keys]);
          keys = ''; // 清空累积的按键值
        }, delay);
      };
    },
    handleClose () {
      this.$refs['user'].resetFields();
      this.user.CardCode = '';
      this.addUserVisible = false;
      this.$emit('close', this.refresh);
    },
    handleCloseBtn () {
      this.refresh = false;
      this.handleClose();
    },
    /**
     * 确认添加用户
     */
    onSubmit () {
      console.log(this.user);
      this.$refs['user'].validate((valid) => {
        if (valid) {
          AddUserApi(this.user).then(r => {
            this.$message({
              type: r.Status ? 'success' : 'error',
              message: r.Message
            });
            if (r.Status) {
              this.refresh = true;
              this.handleClose();
            }
          })
        }
      })
    }
  },
  mounted () {

  }
}
</script>

<style scoped>
.edit-user-dialog {

}
</style>